<template>
  <el-dialog
    center
    append-to-body
    :width="width"
    v-model="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="$emit('dialogClose')"
    custom-class="base-dialog-container"
  >
    <template #title>
      <base-text :content="title" class="el-dialog__title" />
    </template>
    <slot></slot>
    <div class="base-dialog-loading" v-show="isLoading" v-loading="isLoading" />
    <template v-if="hasFooter" #footer>
      <el-button type="primary" @click="$emit('dialogConfirm')">确 定</el-button>
      <el-button type="info" @click="visible = false">取 消</el-button>
    </template>
    <template v-else #footer>
      <slot name="dialogFooter"></slot>
    </template>
  </el-dialog>
</template>

<script setup>
  import {ref, watch, toRef} from 'vue';
  defineEmits(['dialogClose', 'dialogConfirm']);
  const props = defineProps({
    width: {
      type: String,
      default: () => (document.body.clientWidth <= 1440 ? '40%' : '30%')
    },
    title: {
      type: String,
      default: ''
    },
    dialogId: {
      type: Number,
      default: 0
    },
    hasFooter: {
      type: Boolean,
      default: true
    }
  });
  let dialogId = toRef(props, 'dialogId');
  let [visible, isLoading] = [ref(false), ref(false)];

  const loadingOpen = () => (isLoading.value = true);
  const loadingClose = () => (isLoading.value = false);
  watch(dialogId, () => (visible.value = !!dialogId.value));
  defineExpose({loadingOpen, loadingClose});
</script>

<style scoped lang="less">
  .base-dialog-loading {
    position: absolute !important;
    top: 70px;
    left: 15px;
    right: 15px;
    bottom: 15px;
  }
</style>
